<template>
       <h2 style="text-align: center;">登录</h2>
  <table>
     <tr>
        <td>账号</td>
        <td><input type="text" placeholder="请输入账号" v-model="userName"></td>
     </tr>
     <tr>
        <td>密码</td>
        <td><input type="password" placeholder="请输入密码" v-model="userPwd"></td>
     </tr>
     <tr>
        <td colspan="2" style="text-align: center;">
          <input type="button" @click="login" value="登录" >
        </td>
     </tr>
  </table>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'


//创建响应式数据
const userName = ref('')
const userPwd = ref('')

//登录
const login = ()=>{
    if(userName.value=='')
    {
        alert('请输入账号!')
        return
    }
    if(userPwd.value=='')
    {
        alert('请输入密码!')
        return
    }
    axios.get("https://localhost:44354/api/Users/UserLogin",{
        params:{
            Uname:userName.value,
            Upwd:userPwd.value
        }
    }).then(res=>{
        if(res.data==200)
        {
            alert('登录成功!')
        }
        else if(res.data==101)
        {
            alert('账号不存在!')
        }
        else if(res.data==201)
        {
            alert('密码错误!')
        } else 
        {
            alert('登录失败!')
        }
    }).catch(err=>{
        console.log(err);
    })
}
</script>